<template>
  <!-- 第二顶部开始 -->
  <div class="secondTop">
    <a  :class="tempId == null ?  'xuanzhong':''"  @click="tiaoOrSelect(null)"
      href="javaScript:;">全部商品分类</a>

    <a
    :class="item.id == tempId ? 'xuanzhong':''" 
      @click="tiaoOrSelect(item.id)"
      href="javaScript:;"
      v-for="item in typeList"
      :key="item.id"
      >{{ item.typeName }}</a
    >

    <!-- <div class="sousuo">

                <input type="text" placeholder="电视">
                <img src="@/assets/images/sou.png" alt="">
            </div> -->
  </div>
  <!-- 第二顶部结束 -->
</template>

<script>
import { listType } from "@/api/type";

export default {
  data() {
    return {
      typeList: [],

      tempId: this.selectTypeId,
     
    };
  },

    props:{

      selectType:{
          type: Function,
          required: false,
          default: function(id){
            this.$router.push("/list/"+id)
          },
      },

       selectTypeId:{
        type:String,
        required:false,
        default: null,
       }

    },

 // props: ["selectType"],

  components: {},

  created() {
    this.getList();
  },

  methods: {
    getList() {
      listType().then((resp) => {
        this.typeList = resp.data;
      });
    },

    tiaoOrSelect(typeId) {
    
    this.selectType(typeId);
    this.tempId = typeId;

    },
  },
};
</script>

<style scoped>
.secondTop .xuanzhong{
  color: orangered;
}

.secondTop {
  width: 1226px;
  height: 100px;
  /* border: 1px red solid; */
  margin: auto;

  background: url(@/assets/images/logo_jingdong.png) no-repeat 5px center;
}

/* .secondTop a:first-of-type{
  margin-left: 600px;
} */

.secondTop a {
  color: #222;
  font-size: 13px;
  text-decoration: none;
  margin: 0px 10px;

  line-height: 100px;
}
.secondTop a:first-of-type {
  margin-left: 200px;
}

.secondTop .sousuo {
  margin-top: 25px;
  float: right;
  /* display: inline-block; */

  height: 50px;
  width: 300px;
  border: 1px #999 solid;

  position: relative;
}
.secondTop .sousuo:hover {
  border: 1px orangered solid;
}
.secondTop .sousuo:hover img {
  border-left: 1px orangered solid;
}

.secondTop .sousuo img {
  width: 26px;
  padding: 12px;
  vertical-align: middle;
  border-left: 1px #999 solid;

  position: absolute;
  right: 0px;
  top: 0px;
}
.secondTop .sousuo img:hover {
  background-color: orangered;
}
.secondTop .sousuo input {
  width: 249px;
  padding-left: 5px;
  border-width: 0px;
  outline: none;

  height: 50px;
  line-height: 50px;

  box-sizing: border-box;
}
</style>